<template>
  <div class="body_canvas" v-if="isVisible">
    <canvas id="canvas" ref="loadingCanvas" width="200" height="200">A drawing of something</canvas>
    <span>加载中...</span>
  </div>
</template>
<script setup lang="ts">
import {onMounted, ref} from "vue";

const loadingCanvas = ref(null);
defineProps({
  isVisible: {
    type: Boolean,
    default: true
  },
})
onMounted(() => {
  loading()
})

const loading = () => {
  const canvas: any = loadingCanvas.value;
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
  ctx.lineWidth = 10
  let needDeg = 0;
  setInterval(() => {
    needDeg++;
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    ctx.beginPath()
    ctx.arc(100, 100, 50, deg(needDeg - 40), deg(needDeg * 2), false)
    // ctx.strokeStyle = "rgb(" + parseInt(String(Math.random() * 256)) + "," + parseInt(String(Math.random() * 256)) + "," + parseInt(String(Math.random() * 256)) + ")"
    ctx.strokeStyle = "green"
    ctx.stroke()

  }, 10)

  function deg(d: any) {
    return d * Math.PI / 180
  }
}
</script>
<style scoped lang="scss">
.body_canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明蒙版效果 */
  z-index: 9999; /* 确保在最前面显示 */
}

#canvas {
  position: absolute;
  z-index: 10;
}

</style>